<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title><spring:message code="head.clothGarment"></spring:message>-<spring:message code="head.fabricCatalogue"></spring:message></title>
    <link href="${pageContext.request.contextPath }/phone/css/list.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath }/phone/css/bottom.css" rel="stylesheet" />

</head>
<body>
    <div>
        <!--头部--有分类-->
        <div class="cate_header">
        	<a href="javascript:history.go(-1);" class="cate_goback"></a>
            <div class="top"><spring:message code="head.fabricCatalogue"></spring:message></div>
            <ul class="cate_big">
            	<c:forEach items="${ffList }" var="f">
        		<c:if test="${f.ffParentId==0 }">
                <li>
                    <a href="javascript:void(0);">${f.ffName }</a>
                    <ul class="cate_ul hide">
                    	<li name="bx" onclick="checkThis(0,this);" id="bx${f.ffId }"><a href="javascript:void(0)"><spring:message code="fabric.unlimit"></spring:message></a></li>
                        <c:forEach items="${ffList }" var="ffOne">
                        	<c:if test="${ffOne.ffParentId==f.ffId }">
                        		<li id="li${ffOne.ffId }" onclick="checkThis(${ffOne.ffId },this);"><a href="javascript:void(0);" id="${ffOne.ffId }">${ffOne.ffName }</a></li>
                        	</c:if>
                        </c:forEach>
                    </ul>
                </li>
                </c:if>
                </c:forEach>
                <li>
                	<a href="javascript:void(0);"><spring:message code="fabric.state"></spring:message></a>
	                <ul class="cate_ul hide">
	                	<li id="zt0" onclick="checkThis(0,this);"><a href="javascript:void(0);"><spring:message code="fabric.unlimit"></spring:message></a></li>
			            <li id="zt1" onclick="checkThis(1,this);"><a href="javascript:void(0);"><spring:message code="fabric.spotArea"></spring:message></a></li>
			            <li id="zt2" onclick="checkThis(2,this);"><a href="javascript:void(0);"><spring:message code="fabric.orderArea"></spring:message></a></li>
			            <li id="zt3" onclick="checkThis(3,this);"><a href="javascript:void(0);"><spring:message code="fabric.latestFabrics1"></spring:message></a></li>
			            <li id="zt4" onclick="checkThis(4,this);"><a href="javascript:void(0);"><spring:message code="fabric.mostCloselyWatched1"></spring:message></a></li>
			            <li id="zt5" onclick="checkThis(5,this);"><a href="javascript:void(0);"><spring:message code="fabric.price"></spring:message><c:if test="${sId!=6 }"><img src="${pageContext.request.contextPath }/web/img/sort.png" /></c:if><c:if test="${sId==6 }"><img src="${pageContext.request.contextPath }/web/img/sort1.png" /></c:if></a></li>
			        	<li id="zt6" onclick="checkThis(7,this);"><a href="javascript:void(0);"><spring:message code="fabric.yinhua"></spring:message></a></li>
			        </ul>
                </li>
                <div class="clr"></div>
            </ul>
        </div>
        
        <c:if test="${not empty list }">
        <div role="main" class="main" style="margin-top:90px;">
            <!--面料 开始-->
            <div class="mianliao">
                <ul>
                	<c:forEach items="${list }" var="l">
                    <li>
                        <a href="${pageContext.request.contextPath }/api/fabric/detail?fId=${l.fId}">
                            <div class="img_squre" style="background-image:url(${pageContext.request.contextPath }/upload/compression/${l.image });"></div>
                            <span class="le">${l.fNo }</span>
                            <span class="title-posi">${l.material }</span>
                            <span class="ri"><i class="">${l.price }</i><spring:message code="fabricCatalogue.price"></spring:message></span>
                            <div class="clr"></div>
                        </a>
                    </li>
                    </c:forEach>
                    <div class="clr"></div>
                    
                    <div class="fenye_div">
                        <span class="fenye">
		                    <c:if test="${page.totalPage>1 }">
		                    <button type="button" class="before-page" <c:if test="${page.page==1 }">disabled</c:if> onclick="gotoPage(${page.page-1 });"><spring:message code="fabricCatalogue.previousPage"></spring:message></button>
		                    <button type="button" class="next-page" <c:if test="${page.page>=page.totalPage || page.totalPage==0||page.totalPage==1 }">disabled</c:if> onclick="gotoPage(${page.page+1 });"><spring:message code="fabricCatalogue.nextPage"></spring:message></button>
		                    </c:if>
                    	</span>
                    </div>
                    
                </ul>
            </div>
            <!--面料 结束-->
        </div>
        </c:if>
        
        <input type="hidden" id="currentPage" name="page" value="${page.page}"/>
		 <input type="hidden" id="id" name="id" value="${theme.id }"/>
		 <input id="query" type="hidden" value="${query }">
		 <input id="sId" type="hidden" value="${sId }">
		 <input id="type" type="hidden" value="${type }">
        
    <script src="${pageContext.request.contextPath }/phone/js/jquery-1.8.3.min.js"></script>
        <jsp:include page="../main/bottom.jsp"><jsp:param name="bottom" value="3"/></jsp:include>

   </div>
    <script src="${pageContext.request.contextPath }/phone/js/top_nav.js"></script>
    <script>
	    $(document).ready(function () {
	    	var q=$("#query").val();
	    	//addTerm(q);
	    });
	    //添加条件样式
	    function addTerm(q){
	    	var str= new Array();   
	    	str=q.split("-");
	    	if("all"==str[0]){
	    		$("li[name='bx']").attr("class","on");
	    		return;
	    	}
	   	    for (var i=0;i<str.length;i++ )   
	   	    {   var li="#li";
	   	    	li=li+str[i];
	   	    	$(li).attr("class","on");
	   	    }
	   	 	$("li[name='bx']").each(function(){
	   	 		var hasClass=0;//标记
	   	 		$(this).nextAll().each(function(){
	   	    		if($(this).hasClass("on")){
	   	    			hasClass=1;
	   	    		}
	   	 		});
	   	 		if(hasClass==0){
		    		$(this).attr("class","on");
		    	}
	   	 	});
	    }
	    //点击选择筛选条件
	    function checkThis(cId,obj){
	    	var v_id = $(obj).attr('id');//获取当前元素的id
	    	var str=v_id.substring(0,2);//截取前两个字符
	    	var query="";//定义查询条件
	    	var sId=$("#sId").val();//状态
	    	var type=$("#type").val();//类别
	    	if("li"==str){
	    		$(obj).siblings().removeClass("on");
	    		$(obj).attr("class", "on");
	    	}
	    	if("bx"==str){
	    		$(obj).siblings().removeClass("on");
	    		$(obj).attr("class", "on");
	    	}
	    	if("zt"==str){
	    		if(sId==5&&cId==5){
	    			sId=6;
	    		}else if(sId==6&&cId==5){
	    			sId=5;
	    		}else{
	    			sId=cId;
	    		}
	    	}
	    	//遍历所有的class="on" 的查询条件
	    	$('.cate_big ul li').each(function(){
	    		if($(this).hasClass("on")){
	    			var liId=$(this).attr('id');
	    			var liStr=liId.substring(0,2);
	    			var id=liId.substr(2, liId.length-2);
	    			if(query!="" && "li"==liStr){
	    				query=query+"-"+id;
	    			}
	    			if(query=="" && "li"==liStr){
	    				query+=id;
	    			}
	    		}
	    	});
	    	if(query==""){
	    		query="all";
	    	}
	    	$("#query").val(query);
	    	$("#sId").val(sId);
	    	if(sId!=null&&sId!=""){
	    		window.location.href="${pageContext.request.contextPath }/api/fabric/"+type+"/"+query+"?sId="+sId;
	    	}else{
	    		window.location.href="${pageContext.request.contextPath }/api/fabric/"+type+"/"+query;
	    	}
	    }
	    //分页方法
	    function gotoPage(pagenum){
	  		var query=$("#query").val();
			var sId=$("#sId").val();
			var type=$("#type").val();
			if(sId!=null&&sId!=""){
	    		window.location.href="${pageContext.request.contextPath }/api/fabric/"+type+"/"+query+"?sId="+sId+"&page="+pagenum;
	    	}else{
	    		window.location.href="${pageContext.request.contextPath }/api/fabric/"+type+"/"+query+"?page="+pagenum;
	    	}
	  	}
	    
	</script>

</body>
</html>
